<template>
    <div>
        <!-- 表格部分 -->
        <el-card style="margin-top:10px">
            <div style="margin-bottom:5px">
                <el-button type="primary" plain size="small" @click="onAdd"><el-icon ><DocumentAdd/></el-icon>添加</el-button>
                <el-button type="danger" plain size="small" :disabled="multiple"><el-icon><DeleteFilled /></el-icon>删除</el-button>
            </div>
            <el-table :data="tableData" style="width: 100%" @selection-change="handleSelectionChange">
                <el-table-column type="selection" :selectable="selectable" width="50" />
                <el-table-column prop="id" label="ID"/>
                <el-table-column prop="name" label="名称"/>
                <el-table-column prop="status" label="启用">
                    <template #default="{row}">
                        <el-tag v-if="row.status === 0" :disable-transitions='true' type="danger" size="small">否</el-tag>
                        <el-tag v-if="row.status === 1" :disable-transitions='true' type="success" size="small">是</el-tag>
                    </template>
                </el-table-column>
                <el-table-column label="操作选项">
                    <template #default="{row}">
                        <el-button link plain type="primary" size="small" @click="onEdit(row)"><el-icon><Edit /></el-icon>修改</el-button>
                        <el-button link plain type="primary" size="small" @click="onDelete"><el-icon><Delete  /></el-icon>删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 分页器 -->
            <pagination
                v-show="total > 0"
                :total="total"
                v-model:page="queryParams.pageNum"
                v-model:limit="queryParams.pageSize"
                @pagination="getList"
            />
        </el-card>
        <el-dialog
            v-model="addDialogVisible"
            :title="title"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            @close="onReset(addRuleFormRef)"
            width="35%"
        >
            <el-form
                ref="addRuleFormRef"
                style="max-width: 500px"
                :model="addRuleForm"
                :rules="addRules"
                label-width="120"
                class="demo-ruleForm"
                status-icon
            >
                <el-form-item label="名称" prop="name" name="name" required>
                    <el-input v-model="addRuleForm.name" placeholder="请输入名称" clearable/>
                </el-form-item>
                <el-form-item label="描述" prop="description" name="description" >
                    <el-input v-model="addRuleForm.description" type="textarea" placeholder="请输入描述" clearable/>
                </el-form-item>
                <el-form-item label="启用" prop="status" name="status" required >
                    <el-radio-group v-model="addRuleForm.status">
                        <el-radio :value=0>是</el-radio>
                        <el-radio :value=1>否</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="图片宽度"  prop="pictureWidth" name="pictureWidth" required>
                    <el-input v-model="addRuleForm.pictureWidth" placeholder="请输入图片宽度" clearable/>
                </el-form-item>
                <el-form-item label="图片高度"  prop="pictureHeight" name="pictureHeight" required>
                    <el-input v-model="addRuleForm.pictureHeight" placeholder="请输入图片高度" clearable/>
                </el-form-item>
                <el-form-item label="版位机构"  prop="institution" name="institution" required>
                    <el-select v-model="addRuleForm.institution" placeholder="请选择版位机构" clearable>
                        <el-option label="中国银保信" value="1"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="轮播总帧数"  prop="pictureTotal" name="pictureTotal" required>
                    <el-select v-model="addRuleForm.pictureTotal" placeholder="请选择轮播总帧数" clearable>
                        <el-option label="1" value="1"></el-option>
                        <el-option label="2" value="2"></el-option>
                        <el-option label="3" value="3"></el-option>
                        <el-option label="4" value="4"></el-option>
                    </el-select>
                </el-form-item>
            </el-form>
            <template #footer>
            <div class="dialog-footer">
                <el-button @click="onReset(addRuleFormRef)">重 置</el-button>
                <el-button type="primary" @click="onSubmit(addRuleFormRef)">提 交</el-button>
            </div>
            </template>
        </el-dialog>
    </div>
</template>

<script  setup>
import { ref, reactive } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const ids = ref([])
const multiple = ref(true)
const selectable = (row) => ![1, 2].includes(row.id)
const addDialogVisible = ref(false)
const addRuleFormRef = ref()
const total = ref(50)
const title = ref('添加')
// 添加表单的内容
const addRuleForm = ref({
    name: '',
    description: '',
    status: 0,
    pictureWidth: '',
    pictureHeight: '',
    institution: '',
    pictureTotal: ''
})
const tableData = [
    {
        id: '242',
        name: '企业产品横幅广告',
        size: '1000*168',
        status: 0
    },
    {
        id: '182',
        name: '首页横幅',
        size: '340*210',
        status: 1
    }
]

// 校验规则
const addRules = reactive({
    name: [
        { required: true, message: '请输入名称', trigger: 'blur' }
    ],
    pictureWidth: [
        { required: true, message: '请输入图片宽度', trigger: 'blur' }
    ],
    pictureHeight: [
        { required: true, message: '请选择版位机构', trigger: 'blur' }
    ],
    institution: [
        { required: true, message: '请输入标题', trigger: 'blur' }
    ],
    pictureTotal: [
        { required: true, message: '请选择轮播总帧数', trigger: 'blur' }
    ]
})
const queryParams = ref({
        pageNum: 1,
        pageSize: 10
})

const getList = () => {
    console.log('getList', queryParams.value)
}

// 增加
const onAdd = () => {
    title.value = '添加'
    addDialogVisible.value = true
}
// 修改
const onEdit = (row) => {
    title.value = '修改'
    addDialogVisible.value = true
}

// 删除
const onDelete = () => {
    ElMessageBox.confirm(
    '您确定要删除这条数据吗？',
    '系统提示',
        {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
        }
    )
    .then(() => {
        ElMessage({
        type: 'success',
        message: 'Delete completed'
        })
    })
    .catch(() => {
        ElMessage({
            type: 'info',
            message: '取消删除'
        })
    })
}
// 提交
const onSubmit = async(formEl) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
        console.log('submit!')
        addDialogVisible.value = false
        } else {
        console.log('error submit!', fields)
        }
    })
}
// 重置
const onReset = (formEl) => {
    addRuleForm.value = {
        name: '',
        description: '',
        status: 0,
        pictureWidth: '',
        pictureHeight: '',
        institution: '',
        pictureTotal: ''
    }
    formEl.resetFields()
}
const handleSelectionChange = (selection) => {
    ids.value = selection.map(item => item.date)
    multiple.value = !selection.length
}
</script>

<style lang="scss" scoped>
::v-deep{
    .el-table {
    .el-table__header-wrapper{
        th {
        word-break: break-word;
        background-color: #f8f8f9 !important;
        color: #515a6e;
        height: 40px !important;
        font-size: 13px;
        }
    }
    }
}

::v-deep{
    .el-form {
    .el-form-item{
        .el-form-item__label {
            font-weight: bold !important;
        }
    }
    }
}
</style>
